<template>
    <div>
        <h1>普通文本数据绑定</h1>
        <div>普通文本数据绑定{{ text }}</div>
        <input type="text" v-model="text">


        <br><br><br>
        <h1>多行文本数据绑定</h1>
        <textarea>{{ text1 }}</textarea><br>
        <textarea type="text" v-model="text1"></textarea>

        <br><br><br>
        <h1>复选框数据绑定</h1>
        <h5>复选框{{ text2 }}</h5>
        <input type="checkbox" v-model="text2">

        <br><br><br>
        <h1>多选框数据绑定</h1>
        <div>多选框数据绑定: {{ text4 }}</div>
        <input type="checkbox" value="香蕉" v-model="text4" />
        <label for="香蕉">香蕉</label>
        <input type="checkbox" value="苹果" v-model="text4" />
        <label for="苹果">苹果</label>
        <input type="checkbox" value="橘子" v-model="text4" />
        <label for="橘子">橘子</label>


        <h5>单选按钮数据绑定</h5>
        <div>单选按钮数据绑定: {{ text5 }}</div>
        <input type="radio" value="香蕉" v-model="text5" />
        <label for="香蕉">香蕉</label>
        <input type="radio" value="苹果" v-model="text5" />
        <label for="苹果">苹果</label>
        <input type="radio" value="橘子" v-model="text5" />
        <label for="橘子">橘子</label>

        <h5>下拉框选择</h5>
        <div>从下拉框选择单个内容，选择的内容为：{{ text6 }}</div>
        <select v-model="text6">
            <option disabled value="">请选择</option>
            <option>Java</option>
            <option>Python</option>
            <option>PHP</option>
        </select>

        <h5>多选下拉框选择</h5>
        <div>多选，值绑定在一个数组，选择的内容为：{{ text7 }}</div>
        <select v-model="text7" multiple>
            <option disabled value="">请选择</option>
            <option>Selenium</option>
            <option>Appium</option>
            <option>Pytest</option>
            <option>Junit5</option>
        </select>




    </div>
</template>

<script setup>
import { ref } from 'vue';

const text = ref('')
const text1 = ref('')
const text2 = ref(true)
const text4 = ref([])

const text5 = ref("");
const text6 = ref("");
const text7 = ref([]);
</script>

<style lang="scss" scoped></style>